<script setup lang="ts">
import { useRouter } from "vue-router";

defineOptions({
  name: "Page404",
});

const router = useRouter();

function back() {
  router.push("/");
}
</script>

<template>
  <div class="page-container">
    <div class="error-box">
      <div class="error-body text-center">
        <h1>404</h1>
        <h4>很抱歉，但是那个页面看起来已经不存在了。</h4>
        <el-button @click="back">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
html,
body,
#app {
  overflow: hidden;
}

.page-container {
  display: flex;
  padding: 100px;
  opacity: 0;
  animation-name: slideUp;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;

  h1 {
    padding: 0;
    margin: 0;
    font-size: 210px;
    font-weight: 700;
    line-height: 210px;
    color: #33cabb;
    text-shadow:
      4px 4px 0 #f5f6fa,
      6px 6px 0 #33cabb;
  }

  h4 {
    margin: 30px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: #313944;
    letter-spacing: 0.5px;
  }

  .el-button {
    padding: 8px 12px;
    color: #fff !important;
    letter-spacing: 1px;
    background-color: #33cabb;
    border-color: #33cabb;
  }

  .el-button:hover {
    color: var(--el-button-hover-text-color);
    background-color: #52d3c7;
    border-color: #52d3c7;
    outline: none;
  }

  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translateY(80px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
</style>
